<!-- /**
** @descerpion:这是传统的饼图
 */ -->
<template>
  <!-- <div> -->
  <Echart
    id="centreLeft1Charttwo"
    :options="options"
    :height="nowheight"
    :width="nowwidth"
    @initChartClick="initChartClick"
  />
  <!-- </div> -->
</template>

<script>
import Echart from "../../baseMain/index.vue";
export default {
  components: {
    Echart
  },
  props: {
    zhtitle: {
      type: String,
      default: () => ""
    },
    nowwidth: {
      type: String,
      default: () => "100%"
    },
    nowheight: {
      type: String,
      default: () => "100%"
    },
    cdata: {
      type: Object,
      default: () => {}
    },
    changeLegend: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      options: {}
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          // backgroundColor: '',
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {d}% <br/> {c} 只"
          },
          legend: {
            show: false,
            bottom: '0%',
            borderColor: 'red',
            borderWidth: '2px',
            borderType: 'soild',
            // orient: 'vertical',
            icon: "circle",
            color: '#fff',
            label: {
              itemStyle: {
                color: '#fff'
              }
            },
            selected: newData.selected,
            textStyle: {
              color: '#000'
            }
          },
          series: [

            {
              type: 'pie',
              name: '内层细圆环',
              radius: ['62%', '62.5%'],
              center: ['50%', '50%'],
              // hoverAnimation: false,
              // clockWise: false,
              itemStyle: {
                color: 'rgba(0,0,0, 0.1)'
              },
              label: {
                show: false
              },
              data: [100]
            }, {
              type: 'pie',
              radius: ['35%', '58%'],
              center: ['50%', '50%'],
              itemStyle: {
                // normal: {
                borderWidth: 5,
                borderColor: 'rgba(255,255,255, 1)'
                // }
              },
              data: newData.series,
              labelLine: {
                // normal: {
                show: true,
                length: 20,
                length2: 20,
                lineStyle: {
                  width: 1
                }
                // }
              },
              label: {
                // normal: {
                formatter: '{b|{b}}\n{c|{c}只}',
                rich: {
                  b: {
                    fontSize: 14,
                    color: '#000',
                    align: 'left',
                    padding: [0, 0, 0, 0]
                  },
                  d: {
                    fontSize: 18,
                    color: '#000',
                    align: 'left',
                    padding: [10, 0, 0, 0]
                  }
                }
                // }
              }
            }
            // {
            //     // 外层刻度
            //     name: "",
            //     type: 'gauge',
            //     splitNumber: 240, // 刻度数量
            //     radius: '68%', // 图表尺寸
            //     center: ['50%', '50%'],
            //     startAngle: 90,
            //     endAngle: -269.9999,
            //     axisLine: {
            //         show: false,
            //         lineStyle: {
            //             width: 0,
            //             shadowBlur: 0,
            //             color: [
            //                 [1, '#969696']
            //             ]
            //         }
            //     },
            //     axisTick: {
            //         show: false,
            //         lineStyle: {
            //             color: 'auto',
            //             width: 2
            //         },
            //         length: 100,
            //         splitNumber: 1
            //     },
            //     splitLine: {
            //         show: true,
            //         length: 2,
            //         lineStyle: {
            //             color: 'auto',
            //         }
            //     },
            //     axisLabel: {
            //         show: false
            //     }
            // }
          ]
        };
        if (this.zhtitle.length > 0) {
          this.options.title = {
            text: this.zhtitle,
            left: "center",
            textStyle: {
              fontSize: 16,
              // fontWeight:"blod",
              color: "#fff"
            }
          };
        }
      },
      immediate: true,
      deep: true
    },
    changeLegend: {
      deep: true,
      handler({ name }) {
        if (name) {
          let that = this;
          // 初始化图例配置项,你在vue的data中定义的图例的option
          let theOption = that.options;
          console.log(theOption)
          theOption.legend.selected[name] = !theOption.legend.selected[name]

          // 配置项绑定到div上初始化图例,传第二个参数true是为了清除series切换时上次数据的缓存，不然，页面效果有误
          // this.centreLeft1Charttwo.setOption(theOption, true);
          // this.centreLeft1Charttwo.resize();// 更新页面数据
        }
      }
    }
  },
  methods: {
    initChartClick(params) {
      this.$emit('initChartClick', params)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
